<template>
	<div class="music_com">
		<div :style="materialItemStyle" v-if="materialList.length > 0 && isCustomMusic" class="broadcast_con"
			@dragleave="dragLeave" @dragover.prevent="dragOver" @drop="onDrop">
			<div class="material_item" v-for="(item, index) in materialList">
				<div class="play_icon" @click="previewMaterial(item)">
					<cu-icon class="icon is_hover" type="icon-bofang"
						style="font-size: 20px; cursor: pointer; color: #fff;" />
					<cu-icon class="icon is_default" type="icon-yinle"
						style="font-size: 20px; cursor: pointer; color: #fff;" />
				</div>
				<div class="audio_name">{{ item.material_name }}</div>
				<div class="duration_txt">{{ item.material_duration_text }}</div>
				<div class="verticle_line"></div>
				<div class="close_icon" @click="deleteAudio(index)">
					<CloseOutlined />
				</div>
			</div>
		</div>

		<div :style="materialItemStyle" v-if="isCustomMusic && materialList.length === 0" class="broadcast_con_add"
			@dragleave="dragLeave" @dragover.prevent="dragOver" @drop="onDrop">
			<PlusOutlined style="color: #2878FFff" v-if="
			  dragStatus.isDragging &&
			  (dragStatus.element.scene_type == 'audio' ||
				dragStatus.element.material_type == 'audio')
			" />
			<span style="font-size: 14px" v-else>请从左侧拖入背景音乐</span>
		</div>

		<div v-if="!isCustomMusic" :style="materialItemStyle" class="random-con">
			<a-space align="top">
				<span>随机范围：</span>
				<a-space direction="vertical">
					<a-button @click="openRandomMusic" type="default" ghost>
						<template #icon>
							<PlusOutlined />
						</template>
						<span>添加</span>
					</a-button>
					<span v-if="selectTag?.length === 0" style="color: #8d8d91">
						默认为所有分类随机，可以自行选择随机范围
					</span>
				</a-space>
			</a-space>
			<div class="mt-15" v-if="selectTag.length > 0">
				<a-space>
					<a-tag class="music-tag" v-for="item in selectTag">{{
            item.name
          }}</a-tag>
				</a-space>
			</div>
		</div>

		<randomMusic :visible="randomMusicVisible" :tagList="tagList" :selectTag="selectTag" @submit="handleGetTags"
			@close="closeRandomMusic" />

		<materialPreview :visible="previewVisible" :materialDetail="materialDetail" @close="closePreview" />
	</div>
</template>

<script>
	import {
		defineComponent,
		ref,
		reactive,
		toRefs,
		watch,
		computed,
		nextTick,
		onMounted,
	} from "vue";
	import {
		DeleteOutlined,
		PlusOutlined,
		CloseOutlined,
	} from "@ant-design/icons-vue";
	import request from "@/common/utils/request";
	import store from "@/store";
	import {
		message
	} from "ant-design-vue";
	import materialPreview from "../../sourceMaterial/modules/materialPreview.vue";
	import randomMusic from "./randomMusic.vue";
	export default defineComponent({
		components: {
			DeleteOutlined,
			PlusOutlined,
			CloseOutlined,
			materialPreview,
			randomMusic,
		},
		setup(props, context) {
			const state = reactive({
				materialList: [],
				isHover: false,
				previewVisible: false,
				randomMusicVisible: false,
				materialDetail: {},
				tagList: [],
				selectTag: [],
			});

			const isCustomMusic = computed(
				() => store.getters.clipJSON.bgm_mode === "custom"
			);

			watch(
				() => store.getters.clipJSON.bgm_scenes,
				(val) => {
					state.selectTag = val;
				}, {
					immediate: true,
					deep: true,
				}
			);

			watch(
				() => store.getters.clipJSON.bgm,
				(val) => {
					state.materialList = val;
					context.emit("updateNumber", {
						type: "music",
						count: state.materialList.length,
					});
				}, {
					deep: true,
					immediate: true
				}
			);

			watch(
				() => state.materialList,
				(val) => {
					store.dispatch("SetClipJSONBgmData", val);
				}, {
					deep: true,
					immediate: true
				}
			);

			const deleteAudio = (index) => {
				state.materialList.splice(index, 1);
				context.emit("updateNumber", {
					type: "music",
					count: state.materialList.length,
				});
			};

			const previewMaterial = (item) => {
				state.previewVisible = true;
				state.materialDetail = item;
			};

			const closePreview = () => {
				state.previewVisible = false;
				state.materialDetail = {};
			};

			const openRandomMusic = () => {
				state.randomMusicVisible = true;
			};

			const handleGetTags = (selectValue) => {
				state.selectTag = selectValue;
				store.dispatch("SetClipInfo", {
					// bgm_scenes: state.selectTag.map((i) => i.name),
					bgm_scenes: state.selectTag,
				});
				closeRandomMusic();
			};

			const getMaterialTags = () => {
				request
					.get("/work_ai", "/user/shotstack/material/tags", {
						scene_type: "bgm"
					})
					.then((res) => {
						state.tagList = res.result;
					});
			};

			onMounted(() => {
				getMaterialTags();
			});

			const closeRandomMusic = () => {
				state.randomMusicVisible = false;
			};

			const onDrop = (e) => {
				e.preventDefault(); // 阻止浏览器默认行为
				if (
					dragStatus.value.element.scene_type != "audio" &&
					dragStatus.value.element.material_type != "audio"
				)
					return;
				let arr = state.materialList;
				let arrId = state.materialList.map((item) => item.id);
				let flag_1 = false,
					flag_2 = false;
				dragStatus.value.materialList
					.filter((item) => item.selected !== true)
					.map((item) => {
						if (item.checked && arrId.indexOf(item.id) != -1) {
							flag_1 = true;
						}
						if (item.checked && arrId.indexOf(item.id) == -1) {
							flag_2 = true;
							arr.push(item);
						}
					});
				state.materialList = arr;
				context.emit("updateNumber", {
					type: "music",
					count: state.materialList.length,
				});
				if (flag_1) {
					message.success("部分素材重复添加，已自动剔除！");
				}
				if (!flag_1 && flag_2) {
					message.success("操作成功！");
				}
				dragStatus.value?.callback();
				nextTick(() => {
					state.isHover = false;
				});
			};

			const dragOver = () => {
				state.isHover = true;
			};

			const dragLeave = () => {
				state.isHover = false;
			};

			const dragStatus = computed(() => store.getters.dragStatus);
			const materialItemStyle = computed(() => {
				return {
					border: dragStatus.value.isDragging &&
						state.isHover &&
						(dragStatus.value.element.scene_type == "audio" ||
							dragStatus.value.element.material_type == "audio") ?
						"1px solid #2878FFFF" :
						dragStatus.value.isDragging &&
						(dragStatus.value.element.scene_type == "audio" ||
							dragStatus.value.element.material_type == "audio") ?
						"1px dashed #2878FFFF" :
						"1px dashed #5f5f5f",
				};
			});

			return {
				...toRefs(state),
				deleteAudio,
				materialItemStyle,
				dragStatus,
				isCustomMusic,
				onDrop,
				dragOver,
				dragLeave,
				previewMaterial,
				closePreview,
				openRandomMusic,
				closeRandomMusic,
				handleGetTags,
			};
		},
	});
</script>

<style lang="less">
	.music_com {
		display: flex;
		align-items: center;
		justify-content: center;

		.broadcast_con_add {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 16px;
			border: 1px dashed #5f5f5f;
			width: 97%;
			height: 250px;
			margin-top: 20px;
			background-color: #2b2b2e;
			border-radius: 5px;
			color: #fff;
		}

		.random-con {
			font-size: 16px;
			border: 1px dashed #5f5f5f;
			width: 97%;
			height: 250px;
			margin-top: 20px;
			background-color: #2b2b2e;
			border-radius: 5px;
			padding: 15px;
			color: #ffffffd1;

			.music-tag {
				font-size: 14px;
				color: #8d8d91;
				background: #333;
				border: none;
				padding: 3px 7px;
			}
		}

		.broadcast_con {
			border: 1px dashed #5f5f5f;
			width: 97%;
			height: 250px;
			margin-top: 20px;
			display: flex;
			align-items: flex-start;
			justify-content: flex-start;
			align-content: flex-start;
			flex-wrap: wrap;
			color: #b9bbc1;
			background-color: #2b2b2e;
			border-radius: 5px;
			overflow-y: scroll;

			&::-webkit-scrollbar {
				width: 5px;
				height: 0px;
			}

			&::-webkit-scrollbar-track {
				width: 5px;
				background-color: transparent;
				-webkit-border-radius: 4px;
				-moz-border-radius: 4px;
				border-radius: 4px;
			}

			&::-webkit-scrollbar-thumb {
				background-color: rgba(193, 193, 193, 0.5);
				background-clip: padding-box;
				min-height: 28px;
				-webkit-border-radius: 4px;
				-moz-border-radius: 4px;
				border-radius: 4px;
			}

			.material_item {
				padding: 10px;
				display: flex;
				align-items: center;
				margin-left: 10px;
				margin-top: 10px;
				background: rgba(0, 0, 0, 0.4);
				border-radius: 5px;

				.play_icon {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 30px;
					height: 30px;
					border-radius: 50px;
					background: #5b2b5a;

					.is_hover {
						display: none;
					}

					.is_default {
						display: block;
					}

					&:hover {
						background: #8e278b;

						.is_hover {
							display: block;
						}

						.is_default {
							display: none;
						}
					}
				}

				.audio_name {
					color: #fff;
					font-size: 12px;
					margin-left: 10px;
				}

				.is_recognized {
					background: rgba(84, 255, 173, 0.2);
					border-radius: 2px;
					font-size: 12px;
					color: #54ffad;
					font-size: 12px;
					padding: 3px 10px;
				}

				.duration_txt {
					color: #fff;
					font-size: 12px;
					margin: 0 10px;
				}

				.verticle_line {
					height: 15px;
					width: 1px;
					background-color: #888;
					border: none;
					margin: 0 10px;
				}

				.audio_to_text {
					width: 30px;
					height: 30px;
					border-radius: 5px;
					display: flex;
					align-items: center;
					justify-content: center;

					&:hover {
						background: rgba(255, 255, 255, 0.12);
					}
				}

				.close_icon {
					width: 30px;
					height: 30px;
					border-radius: 5px;
					display: flex;
					align-items: center;
					justify-content: center;
					cursor: pointer;
					transition: all 0.3s;

					&:hover {
						background: rgba(255, 255, 255, 0.12);
					}
				}
			}
		}
	}
</style>